<!-- 门店中心页 -->
<template>
  <view v-if="shenheStatus == 0" class="md-center">
    <view class="header-bg"></view>
    <view class="header-section">
      <view class="md-info">
        <view class="info-left">
          <view class="name">{{ staffData.md_name }}</view>
          <view class="time"
            >{{ $t("shop.startTime") }}：{{
              staffData.md_shop_time_type == 0
                ? "00:00-23:59"
                : staffData.md_start_time + "-" + staffData.md_end_time
            }}</view
          >
        </view>
        <view class="md-logo">
          <image :src="staffData.md_logo" mode="" />
        </view>
      </view>
      <view class="staff-data">
        <view class="staff-info">
          <view class="user-info">
            <image :src="staffData.avatar" mode="" />
            <text>{{ staffData.name }}</text>
          </view>
          <view class="scan-box" @click="scanQrcode">
            <i class="iconfont icon-scanning"></i>
            <text>{{ $t("mdAdmin.clerk") }}</text>
            <u-icon size="22" color="#F0250E" name="arrow-right"></u-icon>
          </view>
        </view>
        <view class="clerked-box" @click="gotoClerk(3)">
          <view class="label-text">{{ $t("mdAdmin.clerkedOrder") }}</view>
          <view class="clerked-num">
            <text>{{ staffData.clerk_count }}</text>
            <u-icon size="24" color="#EF250E" name="arrow-right"></u-icon>
          </view>
        </view>
      </view>
    </view>
    <view class="write-off">
      <view class="label-titel">
        <text>{{ $t("mdAdmin.noClerk") }}</text>
        <text>{{ $t("mdAdmin.noClerkOrder") }}</text>
      </view>
      <view class="clerk-num" @click="gotoClerk(2)">
        <text>{{ staffData.no_clerk_count }}</text>
        <u-icon size="24" color="#262626" name="arrow-right"></u-icon>
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
export default {
  components: { Shenhe },
  data() {
    return {
      mdInfo: {},
      staffData: {},
    };
  },
  onLoad(t) {},
  computed: {},
  onShow() {
    this.getStaffCenter();
  },
  watch: {},
  methods: {
    getStaffCenter() {
      this.$allrequest.mdAdmin
        .getStaffCenter({},true)
        .then((res) => {
          if (!res.code) {
            this.staffData = res.data;
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateBack();
            }, 1500);
          }
        })
        .catch((err) => {
          uni.showToast({
            title: err.msg,
            icon: "none",
          });
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        });
    },
    scanQrcode() {
      this.$utils.toUrl("", "clerk");
    },
    gotoClerk(status) {
      this.$utils.toUrl(`/md_admin/md-center/self-mention?status=${status}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.md-center {
  width: 100%;
  min-height: 100vh;
  background: #ffffff;
  position: relative;
  .header-bg {
    width: 100%;
    height: 340rpx;
    background: #f0250e;
    border-radius: 0px 0px 40rpx 40rpx;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
  }
  .header-section {
    width: 100%;
    position: relative;
    z-index: 1;
    padding-top: 40rpx;
    .md-info {
      width: 92vw;
      height: 144rpx;
      background: #ffffff;
      border-radius: 20rpx;
      margin: 0 auto;
      position: relative;
      display: flex;
      align-items: center;
      padding-left: 28rpx;
      .info-left {
        .name {
          font-size: 40rpx;
          font-family: PingFang SC;
          font-weight: 600;
          color: rgba(0, 0, 0, 0.85);
        }
        .time {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: rgba(140, 140, 140, 0.85);
          margin-top: 6rpx;
        }
      }
      .md-logo {
        position: absolute;
        right: 30rpx;
        top: -16rpx;
        z-index: 11;
        width: 124rpx;
        height: 124rpx;
        border: 1px solid #f1f1f1;
        border-radius: 12rpx;
        background-color: #ffffff;
        overflow: hidden;
        image {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
    }
    .staff-data {
      width: 92vw;
      margin: 24rpx auto 0;
      background: #ffffff;
      box-shadow: 0px 6rpx 24rpx rgba(0, 0, 0, 0.03);
      border-radius: 20rpx;
      padding: 48rpx 40rpx 52rpx 30rpx;
      .staff-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .user-info {
          display: flex;
          align-items: center;
          image {
            width: 72rpx;
            height: 72rpx;
            background: #f1f1f1;
            border-radius: 50%;
          }
          text {
            display: inline-block;
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: 600;
            color: #262626;
            margin-left: 12rpx;
          }
        }
        .scan-box {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          .iconfont {
            color: #ee250e;
            font-size: 36rpx;
          }
          text {
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 600;
            color: #f0250e;
            margin: 0 3rpx;
          }
        }
      }
      .clerked-box {
        margin-top: 62rpx;
        display: flex;
        align-items: baseline;
        .label-text {
          font-size: 22rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #262626;
        }
        .clerked-num {
          display: flex;
          align-items: center;
          margin-left: 4rpx;
          text {
            font-size: 48rpx;
            font-family: PingFang SC;
            font-weight: 600;
            color: #ef250e;
          }
        }
      }
    }
  }
  .write-off {
    width: 92vw;
    background: #ffffff;
    border: 1px solid #f2f2f2;
    border-radius: 20rpx;
    margin: 24rpx auto;
    padding: 28rpx;
    .label-titel {
      display: flex;
      align-items: flex-end;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 600;
      color: #262626;
      text:nth-child(2) {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #8c8c8c;
        margin-left: 8rpx;
      }
    }
    .clerk-num {
      display: flex;
      align-items: center;
      text {
        font-size: 48rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #262626;
      }
    }
  }
}
</style>
